<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用shadow dom 进行样式隔离</title>
  </head>
  <body>
    <main>
      <header>
        <div>hello world main</div>
        <div id="shadow">hello world shadow</div>
      </header>
    </main>
    <script>
      //创建一个外接无法访问的shadow dom
      let shadowDOM = shadow.attachShadow({ mode: 'closed' })
      let pElm = document.createElement('p')
      pElm.innerHTML = 'hello p'
      let styleElm = document.createElement('style')
      styleElm.textContent = `
        p{color:red}
      `
      shadowDOM.appendChild(styleElm)
      shadowDOM.appendChild(pElm)
    </script>
  </body>
</html>
